<template>
    <div class="row">

        <div v-if="viewType==0">
            <div class="widget" style="border: none;margin-bottom: 10px">
                <div class="widget-body" style="padding: 0px;">

                    <!--<vue-html5-editor content="草泥马1" :height="150" ></vue-html5-editor>-->

                    <ul class="nav nav-tabs" style="background: #ebeef2;width: 100%;z-index: 100;border: none;cursor:auto ;">
                        <li :class="refType == 0 ? 'active' : 'notActive'" @click="changeRefType(0)"><a>全部公告</a></li>
                        <li :class="refType == 1 ? 'active' : 'notActive'" @click="changeRefType(1)"><a>小区公告</a></li>
                        <li :class="refType == 2 ? 'active' : 'notActive'" @click="changeRefType(2)"><a>政府公告</a></li>
                    </ul>

                    <div style="padding: 16px;padding-bottom: 20px">

                        <div style="padding-top: 7px;display: inline-block">
                            <div style="display: inline-block">
                                <input v-model="isRead" @change="changeRead" class="magic-radio" type="radio" value="" id="aaa" >
                                <label for="aaa" :class="isRead == '' ? 'radioCheck' : 'radioNormal' ">全部</label>
                            </div>

                            <div style="display: inline-block">
                                <input v-model="isRead" @change="changeRead" class="magic-radio" type="radio" value="1" id="bbb">
                                <label for="bbb" :class="isRead == '1' ? 'radioCheck' : 'radioNormal' " style="font-size: 12px">已读</label>
                            </div>

                            <div style="display: inline-block">
                                <input v-model="isRead" @change="changeRead" class="magic-radio" type="radio" value="0" id="ccc" >
                                <label for="ccc" :class="isRead == '0' ? 'radioCheck' : 'radioNormal' ">未读</label>
                            </div>
                        </div>

                        <div style="float: right;display: inline-block">
                        类型：  <select class="form-control" v-model="type" @change="changeType" style="width: 150px;display: inline-block;margin-right: 15px">
                            <option v-for="option in types"  :value="option.id">
                                {{ option.name }}
                            </option>
                        </select>

                        标题： <input type="text"  @keyup.enter="search" v-model="searchTerm" style="width: 200px;display: inline-block;margin-right: 5px" class="form-control" placeholder="搜索标题">
                        <button @click="search" style="margin: 0;margin-bottom: 1.5px" class="btn">
                            <i class="fa fa-search" aria-hidden="true"></i>
                            搜索
                        </button>
                        </div>






                    </div>

                </div>
            </div>

            <div style="padding:10px;background-color: #ffffff">
                <table class="table table-bordered" >
                    <thead style="background-color: #eef1f6;" >
                    <tr style="height: 40px;font-weight: bold;">
                        <th class="tableHead" style="width: 40%" >公告标题</th>
                        <th class="tableHead" style="width: 120px" >类型</th>
                        <th class="tableHead"  style="width: 100px">发布人</th>
                        <th class="tableHead" style="width: 80px" >时间</th>

                        <!--<th class="tableHead" >操作</th>-->
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item,index) in list.list" style="height: 40px;">
                        <td @click="getBulletinDetail(item.id,index)"  :class="item.isReaded ? 'tableTitle' : 'tableTitleBold'">{{item.title}}</td>
                        <td >{{item.announcementTypeName}}</td>
                        <td >{{item.publisher}}</td>
                        <td >{{item.publishTime|moment('LL')}}</td>

                        <!--<td @click="getBulletinDetail(item.id)" class="checkMsg">查看</td>-->
                    </tr>
                    </tbody>
                </table>

                <!-- pager -->
                <div align="right">
                    <pager @goto="gotoPage"  :current="curPage" :allpage="allPageNum"></pager>
                </div>


            </div>
        </div>

        <div  v-if="viewType==1" style="margin-bottom: 10px;background-color: #ffffff;padding:26px 54px 26px 54px">
            <backbtn @back="backView"></backbtn>
            <div style="font-size: 18px;text-align: center;padding-bottom: 20px">
                {{detail.announcement.title}}
            </div>
            <div align="center" style="font-size: 12px;">
                <span class="msgSubheader" style="border: none">
                  发布人： {{detail.announcement.creator}}
                </span>

                <span class="msgSubheader">
                  发布时间：{{detail.announcement.publishTime|moment('LL')}}
                </span>

                <span class="msgSubheader"  style="border-left: none">
                    公告类型：{{detail.announcement.announcementType.name}}
                </span>

                <span class="msgSubheader"  style="border: none">
                   浏览次数：{{detail.announcement.browseTimes}}次
                </span>

            </div>

            <div style="padding: 46px 0 70px 0">
               {{detail.announcement.content}}
            </div>

            <div style="padding-bottom: 25px;border-bottom: dashed 1px #ddd">
                <span class="associate" v-if="detail.preId" @click="getBulletinDetail(detail.preId)" >
                    上一条：{{detail.preAnnouncementTitle | cutStr(10)}}
                </span>
                <span class="associate" v-if="detail.nextId" @click="getBulletinDetail(detail.nextId)" style="float: right">
                    下一条：{{detail.nextAnnouncementTitle | cutStr(10)}}
                </span>
            </div>

        </div>

    </div>
</template>

<script type="application/ecmascript">
    import pager from './pager.vue'
    import backbtn from './backBtn.vue'
    import api from '../constant/api'
    import * as types from '../store/types'



    export default {
        name: 'msg',
        data () {
            return {
                msg: '消息公告',
                viewType:0,//0列表，1详情
                houseId:JSON.parse(sessionStorage.currentHouse).houseId,
                refType:0,
                types:[],
                type:'',
                searchTerm:'',
                list:[],
                curPage:1,
                allPageNum:1,
                detail:{},
                isRead:'',
            }
        },
        components:{//引用组件
            pager:pager,//分页器
            backbtn:backbtn,//返回按钮
        },
        props:{
            refresh:''
        },
        mounted(){
            this.initData();

        },
        watch:{
            refresh:function(){
                console.log('msg component have notice this change!');
                console.log(this.refresh);
                this.initData();
            }
        },
        methods: {
            initData:async function(){
                this.$store.commit(types.CHANGEROUTE, 'msg');
                this.$store.commit(types.CHANGEROUTEDESC, {firstTitle:'',lastTitle:this.msg});
                this.viewType = 0;
                this.searchTerm = '';
                this.curPage = 1;
                this.refType = 0;
                this.isRead = '';
                let res = await this.api.post('getBulletinTypes');
                this.types = res.data.data;
                this.types.unshift({id:'',name:'全部'})
                console.log('this.types');
                console.log(this.types);
                this.type = this.types[0].id
                await this.getList();
                let id = this.$route.params.id;
                console.log('id-->'+ id);
                if(this.$route.params.id != '0'){
                    this.getBulletinDetail(id);
                }
            },
            getList:async function(){
                let query = {
                    houseId:this.houseId,
                    page:this.curPage,
                    pageSize:10,
                    typeId:this.type,
                    refType:this.refType,
                    isRead:this.isRead,
                    searchTerm:this.searchTerm
                };
                let res = await this.api.post('getBulletinList',query);
                this.list = res.data.data;
                this.allPageNum = this.list.maxpage;
                console.log('this is list:  ',this.list);
            },
            search:function () {
                this.curPage = 1;
                this.getList();
            },
            changeRefType:function (type) {
                if(this.refType == type ) return;//选中不用重复请求
                this.refType = type;
                this.searchTerm = '';
                this.getList();
            },
            changeType:function () {
                this.searchTerm = '';
                this.curPage = 1;
                this.getList();
            },
            changeRead:function(){
                this.searchTerm = '';
                this.curPage = 1;
                this.getList();
            },
            gotoPage:function (page) {
                this.curPage = page;
                this.getList( );
            },
            getBulletinDetail:async function(id,index){
                let query = {
                    id:id,
                    houseId:this.houseId,
                    typeId:this.type,
                    searchTerm:this.searchTerm,
                    refType:this.refType,
                };
                let res = await this.api.post('getBulletinDetail',query);
                console.log(res);
                if(index){
                  this.list.list[index].isReaded = true;
                }
                this.viewType = 1;
                this.detail = res.data.data;
                this.$store.commit(types.CHANGEROUTEDESC, {firstTitle:' ' + this.msg + ' > ',lastTitle:this.detail.announcement.title});
                console.log(this.detail);
            },
            backView:function () {
                this.viewType = 0;
                this.$store.commit(types.CHANGEROUTEDESC, {firstTitle:'',lastTitle:this.msg});
            }

        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss' rel="stylesheet/scss" type="text/css">
    .nav-tabs  li.active  a, .nav-tabs  li.active  a:hover, .nav-tabs  li.active  a:focus {
        color: #555;
        cursor: default;
        background-color: #fff;
        color:#2ea5f8;
        border: none;
        border-top: #2ea5f8 3px solid;
        border-right: #ddd 1px solid;
        margin: 0;
        border-radius: 0;
    }
    li.notActive  > a, .nav-tabs{
        background-color: #fff;
        border: #ddd solid 1px;
        margin: 0;
        color: #81858b;
        border-radius: 0;
        cursor:pointer;
        border-left: none;
    }

    .tableHead{
        text-align: center;
        border-bottom: none;
    }
    td{
        text-align: center;
    }

    .checkMsg{
        color: #2ea5f8;
        cursor: pointer;
    }

    .checkMsg:hover{
        text-decoration:underline;
    }

    .msgSubheader{
        border-left: solid 1px #ddd;
        border-right: solid 1px #ddd;
        padding: 0 10px 0 10px
    }
    .associate{
        cursor: pointer;
    }
    .associate:hover{
        text-decoration:underline;
    }
    .tableTitle{
        text-align: left;
    }

    .tableTitleBold{
        text-align: left;
        font-weight: bold;
    }
    .tableTitle:hover{
        text-decoration:underline;
        cursor: pointer;
    }
    .tableTitleBold:hover{
        text-decoration:underline;
        cursor: pointer;
    }
     .btn{
         color:#ffffff;
         background-color: #2ea5f8;
         margin-right: 10px
     }

    .radioCheck{
        font-weight: bold;
        font-size: 12px;
        padding-right: 2px;
    }

    .radioNormal{
        font-weight: normal;
        font-size: 12px;
        padding-right: 2px;
    }



    .magic-radio + label{
        padding-left: 20px;
        margin-right: 10px;
    }





</style>
